<template>
  <div class="view-container">
    <el-form :model="queryParam">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="菜单名称">
            <el-input v-model="queryParam.menuTitle" placeholder="请输入菜单名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="菜单类型">
            <el-select v-model="queryParam.menuType" class="width-control" placeholder="请选择菜单类型" clearable>
              <el-option v-for="item in dictValue.menu_type" :key="item.dictKey" :label="item.dictValue"
                         :value="item.dictKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否显示">
            <el-select v-model="queryParam.isVisiable" class="width-control" placeholder="请选择是否显示" clearable>
              <el-option v-for="item in dictValue.yes_or_no" :key="item.dictKey" :label="item.dictValue"
                         :value="item.dictKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <nebula-table :data="tableData" :columns="columns" row-key="id" :tree-props="{ children: 'sysMenuList' }"
                  header-row-class-name="header-row-class" size="default" border :total="rowsTotal"
                  :default-page-size="10" show-overflow-tooltip use-tool-bar @change="changePage">
      <template #head-toolbar>
        <el-button type="primary" @click="handleCreate" size="small">新增</el-button>
      </template>
      <template #operation="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
      <template #menuIcon="scope">
        <el-icon>
          <component :is="scope.row.menuIcon"/>
        </el-icon>
      </template>
      <template #dictType="scope">
        <dict-tag :options="dictValue.menu_type" :values="scope.row.menuType"></dict-tag>
      </template>
      <template #isCache="scope">
        <dict-tag :options="dictValue.yes_or_no" :values="scope.row.isCache"></dict-tag>
      </template>
      <template #isThird="scope">
        <dict-tag :options="dictValue.yes_or_no" :values="scope.row.isThird"></dict-tag>
      </template>
      <template #isVisiable="scope">
        <dict-tag :options="dictValue.yes_or_no" :values="scope.row.isVisiable"></dict-tag>
      </template>
    </nebula-table>
    <el-dialog v-model="isShow" title="新增菜单">
      <div class="view-container">
        <el-form :model="createParam" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="父级菜单" prop="parentId">
                <el-tree-select v-model="createParam.parentId" :data="tableData" :props="replaceFields" check-strictly
                                :render-after-expand="false" style="width: 240px" node-key="id" class="width-control"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组件名称" prop="menuName">
                <el-input v-model="createParam.menuName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="menuTitle">
                <el-input v-model="createParam.menuTitle"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单图标" prop="menuIcon">
                <icon-picker v-model="createParam.menuIcon"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单类型" prop="menuType">
                <el-select v-model="createParam.menuType" placeholder="请选择" class="width-control">
                  <el-option v-for="item in dictValue.menu_type" :value="Number(item.dictKey)"
                             :label="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限标识" prop="permission">
                <el-input v-model="createParam.permission"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由地址" prop="routerPath">
                <el-input v-model="createParam.routerPath"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组件地址" prop="compPath">
                <el-input v-model="createParam.compPath"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="是否缓存" prop="isCache">
                <el-select v-model="createParam.isCache" placeholder="请选择" class="width-control"
                           clearable>
                  <el-option v-for="item in dictValue.yes_or_no" :value="Number(item.dictKey)"
                             :label="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否外链" prop="isThird">
                <el-select v-model="createParam.isThird" placeholder="请选择" class="width-control"
                           clearable>
                  <el-option v-for="item in dictValue.yes_or_no" :value="Number(item.dictKey)"
                             :label="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否可见" prop="isVisiable">
                <el-select v-model="createParam.isVisiable" placeholder="请选择" class="width-control"
                           clearable>
                  <el-option v-for="item in dictValue.yes_or_no" :value="Number(item.dictKey)"
                             :label="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序" prop="orderNo">
                <el-input-number v-model="createParam.orderNo" :min="0" class="width-control"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="createCancel">取消</el-button>
        <el-button type="primary" @click="createSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {getMenuTableData, createOrEditMenu, deleteById} from "@/api/sysMenu.js";
import {getDict} from "@/util/dict.js";
import DictTag from "@/components/DictTag";
import NebulaTable from "@/components/NebulaTable.vue";
import IconPicker from "@/components/IconPicker.vue";
import {ElMessageBox, ElNotification} from "element-plus";

defineOptions({
  name: "sysMenu",
})
const dicts = ["menu_type", "yes_or_no"]

const isShow = ref(false)
const checkValue = 1
const createParam = ref({
  parentId: null,
  menuTitle: null,
  menuIcon: "House",
  menuType: null,
  menuName: null,
  permission: null,
  routerPath: null,
  compPath: null,
  orderNo: 1,
  isCache: 1,
  isThird: 0,
  isVisiable: 1
})


const rowsTotal = ref(0)
const replaceFields = ref({
  label: "menuTitle",
  children: "sysMenuList"

})

const queryParam = ref({
  menuTitle: null,
  menuType: null,
  isVisiable: null,
  pageNum: 1,
  pageSize: 10,
})

const changePage = (currentPage,pageSize) => {
  queryParam.value.pageNum = currentPage
  queryParam.value.pageSize = pageSize
  handleQuery()
}

const columns = [
  {title: "菜单名称", key: "menuTitle"},
  {title: "菜单图标", key: "menuIcon", customSlot: "menuIcon", align: 'center'},
  {title: "菜单类型", key: "menuType", align: 'center', customSlot: 'dictType'},
  {title: "权限标识", key: "permission", align: 'center'},
  {title: "路由地址", key: "routerPath", align: 'center'},
  {title: "组件地址", key: "compPath", align: 'center'},
  {title: "排序", key: "orderNo", align: 'center'},
  {title: "是否缓存", key: "isCache", align: 'center', customSlot: 'isCache'},
  {title: "是否外链", key: "isThird", align: 'center', customSlot: 'isThird'},
  {title: "是否可见", key: "isVisiable", align: 'center', customSlot: 'isVisiable'},
  {title: "操作", align: 'center', customSlot: 'operation', width: 140}
]
const tableData = ref([])


const resetParams = () => {
  for (let key in queryParam.value) {
    if (key !== "pageNum" && key !== "pageSize") {
      queryParam.value[key] = null;
    }
  }
}

const dictValue = ref({})

const handleQuery = () => {
  getMenuTableData(queryParam.value).then(res => {
    tableData.value = res.data.rows
    rowsTotal.value = res.data.total
  })
}

const handleCreate = () => {
  isShow.value = true
}

const createSubmit = () => {
  createOrEditMenu(createParam.value).then(res => {
    if (res.code === 200) {
      isShow.value = false

      ElNotification({
        title: '操作成功',
        type: 'success',
      })
      handleQuery()
    } else {
      ElNotification({
        title: '创建失败',
        message: res.msg,
        type: 'error',
      })
    }
  })
}

const createCancel = () => {
  isShow.value = false
  for (let key in createParam.value) {
    switch (key) {
      case "menuIcon":
        createParam.value[key] = "layui-icon-home";
        continue;
      case "orderNo":
        createParam.value[key] = 1;
        continue;
      default:
        createParam.value[key] = null;
    }
  }
}

const handleEdit = (row) => {
  handleCreate()
  createParam.value = {...row}
}


const handleDelete = (row) => {
  const confirmText = row.sysMenuList ? `确定要删除${row.menuTitle}及其下属子菜单吗?` : `确定要删除${row.menuTitle}吗?`
  ElMessageBox.confirm(
      confirmText,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(()=>{
    let param = {id: row.id}
    deleteById(param).then(res => {
      if (res.code === 200) {
        ElNotification({
          title: '成功',
          type: 'success',
          message: res.msg
        })
      } else {
        ElNotification({
          title: '失败',
          type: 'error',
          message: res.msg
        })
      }
      handleQuery()
    })
  })
}
onMounted(() => {
  handleQuery()
  dictValue.value = getDict({type: {dicts}})
})

</script>
